<template>
	<view class="pay-container">
		<!-- 顶部状态栏 -->
		<view class="status-bar"></view>

		<!-- 头部导航 -->
		<view class="header">
			<view class="back-btn" @click="navigateBack">
				<text class="iconfont icon-back"></text>
			</view>
			<view class="title">订单支付</view>
			<view class="empty"></view>
		</view>

		<!-- 支付金额 -->
		<view class="amount-section">
			<view class="amount-label">实付款</view>
			<view class="amount-value">¥{{ payMoney }}</view>
		</view>

		<!-- 支付方式 -->
		<view class="payment-methods">
			<view class="method-title">选择支付方式</view>
			<view class="method-item" @click="selectPaymentMethod('wechat')">
				<view class="method-icon wechat"></view>
				<view class="method-name">微信支付</view>
				<view class="method-select" :class="{ 'selected': selectedMethod === 'wechat' }"></view>
			</view>
			<!-- <view class="method-item" @click="selectPaymentMethod('alipay')">
        <view class="method-icon alipay"></view>
        <view class="method-name">支付宝</view>
        <view class="method-select" :class="{ 'selected': selectedMethod === 'alipay' }"></view>
      </view> -->
			<view class="method-item" @click="selectPaymentMethod('balance')">
				<view class="method-icon balance"></view>
				<view class="method-name">余额支付</view>
				<view class="method-select" :class="{ 'selected': selectedMethod === 'balance' }"></view>
			</view>
		</view>

		<!-- 支付按钮 -->
		<view class="pay-button" @click="confirmPayment">
			立即支付
		</view>
	</view>
</template>

<script>
	import api from '../../api/request';

	export default {
		data() {
			return {
				orderNum: '',
				payMoney: '',
				selectedMethod: 'wechat' // 默认选择微信支付
			};
		},
		onLoad(options) {
			if (options.order_num && options.pay_money) {
				this.orderNum = options.order_num;
				this.payMoney = options.pay_money;
			} else {
				uni.showToast({
					title: '缺少订单信息',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		methods: {
			// 返回上一页
			navigateBack() {
				uni.navigateBack();
			},

			// 选择支付方式
			selectPaymentMethod(method) {
				this.selectedMethod = method;
			},

			// 确认支付
			confirmPayment() {
				if (!this.selectedMethod) {
					uni.showToast({
						title: '请选择支付方式',
						icon: 'none'
					});
					return;
				}

				uni.showLoading({
					title: '处理中...'
				});

				// 根据选择的支付方式调用不同的API
				let payPromise;
				if (this.selectedMethod === 'wechat') {
					payPromise = api.payOrder({
						order_sn: this.orderNum,
						pay_type: 3, // 假设3是微信支付类型
						address_id: 0, // 这里需要根据实际情况传入地址ID
						coupon_id: 0
					});
				} else if (this.selectedMethod === 'alipay') {
					payPromise = api.payOrder({
						order_sn: this.orderNum,
						pay_type: 2, // 假设2是支付宝支付类型
						address_id: 0,
						coupon_id: 0
					});
				} else if (this.selectedMethod === 'balance') {
					// 弹出输入支付密码框
					uni.showModal({
						title: '余额支付',
						content: '请输入支付密码',
						editable: true,
						placeholderText: '请输入6位数字密码',
						success: (res) => {
							if (res.confirm) {
								const payPwd = res.content;
								if (!payPwd || payPwd.length !== 6) {
									uni.showToast({
										title: '请输入6位数字密码',
										icon: 'none'
									});
									return;
								}

								payPromise = api.balancePayGoods({
									order_num: this.orderNum,
									address_id: 0,
									coupon_id: 0,
									pay_pwd: payPwd
								});

								this.handlePayResult(payPromise);
							} else {
								uni.hideLoading();
							}
						}
					});
					return;
				}

				this.handlePayResult(payPromise);
			},

			// 处理支付结果
			handlePayResult(payPromise) {
				payPromise.then(res => {
					uni.hideLoading();
					if (res.code === 1) {
						// 支付成功
						uni.showToast({
							title: '支付成功',
							icon: 'success'
						});
						// 跳转到订单详情页
						setTimeout(() => {
							uni.navigateTo({
								url: `/pages/order/orderDetail?order_num=${this.orderNum}`
							});
						}, 1500);
					} else {
						uni.showToast({
							title: res.msg || '支付失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					uni.hideLoading();
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					});
					console.error('支付失败:', err);
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.pay-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.status-bar {
		height: 20rpx;
		background-color: #f5f5f5;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
	}

	.back-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.iconfont {
		font-size: 36rpx;
		color: #333;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.empty {
		width: 60rpx;
	}

	.amount-section {
		background-color: #fff;
		padding: 40rpx 30rpx;
		text-align: center;
		border-bottom: 1rpx solid #eee;
	}

	.amount-label {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 10rpx;
	}

	.amount-value {
		font-size: 60rpx;
		font-weight: bold;
		color: #e64340;
	}

	.payment-methods {
		background-color: #fff;
		margin-top: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.method-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.method-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 30rpx;
		border-bottom: 1rpx solid #eee;

		&:last-child {
			border-bottom: none;
		}
	}

	.method-icon {
		width: 60rpx;
		height: 60rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.wechat {
		background-color: #07c160;
	}

	.alipay {
		background-color: #1677ff;
	}

	.balance {
		background-color: #ff9500;
	}

	.method-name {
		flex: 1;
		font-size: 30rpx;
		color: #333;
	}

	.method-select {
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid #ddd;
		border-radius: 50%;
	}

	.selected {
		border-color: #07c160;
		background-color: #07c160;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 20rpx;
			height: 10rpx;
			border-bottom: 2rpx solid #fff;
			border-right: 2rpx solid #fff;
			transform: translate(-50%, -50%) rotate(45deg);
		}
	}

	.pay-button {
		position: fixed;
		bottom: 40rpx;
		left: 50rpx;
		right: 50rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background-color: #ff9500;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		border-radius: 45rpx;
		box-shadow: 0 4rpx 10rpx rgba(255, 149, 0, 0.3);
	}
</style>